<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据资产管理平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />

	<!-- Google Font -->


	<!-- Font Awesome Icons -->
	<link rel="stylesheet" href="assets/font/iconfont.css">

	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />
	<link href="./assets/layui/css/layui.css" rel="stylesheet">

	<link rel="stylesheet" href="./assets/font/iconfont.css">

	<style>
		body {
			font-size: 17px;
		}

		.nav-item .active {
			font-weight: 600;
		}

		/* 修改header的样式 */
		.nav-link {
			color: #353c58 !important;
		}

		.navbar-dark .navbar-brand:hover,
		.navbar-dark .navbar-brand:focus {
			color: #FF6A00;
		}

		.btn-outline-white:hover {
			background-color: rgba(244, 244, 244, 0.7);
			border-color: #FF6A00 !important;
		}

		.navbar-dark .navbar-brand {
			color: #353c58;
		}

		.navbar {
			background-color: rgba(244, 244, 244, 0.5);
		}

		.nav-link.active {
			color: #FF6A00 !important;
		}

		.nav-link.active,
		.nav-link.active1 {
			color: #FF6A00 !important;
		}

		.page-item.active .page-link {
			z-index: 1;
			color: #fff;
			background-color: #FF6A00;
			border-color: #FF6A00;
		}

		/* end */

		.card-deck {
			flex-wrap: wrap;
			justify-content: left;
		}

		.card-deck .card {
			width: 21.5%;
			flex: inherit;
			margin-bottom: 20px;
		}

		/* 定制数据大字 */
		/* 大于1680px：默认 */
		/*1360px ——1680px */
		@media (max-width: 1680px) {
			.jumbotron {
				padding-top: 9rem;
			}
		}

		/* 小于1360px */
		@media (max-width: 1360px) {
			.display-3 {
				font-size: 60px;
			}

			.display-3 p {
				font-size: 60px;
			}

			.jumbotron {
				padding-top: 11rem;
			}
		}

		.classify {
			padding-top: 15px;
			border-bottom: 1px solid rgb(229, 229, 229);
			border-top: 1px solid rgb(229, 229, 229);
		}

		.classify span {
			line-height: 33px;
		}

		.classify:first-child {
			border-bottom: 0;
		}

		.nav {
			margin-left: 90px;
			margin-top: -40px;
		}

		.nav-link {
			padding: 0 15px;
		}

		.nav li a {
			color: black;
			line-height: 48px;
		}

		.nav-item .active1 {
			font-weight: 600;
			color: #0F74B5;
		}

		.nav li a:hover {
			color: #0F74B5;
		}

		.searchbox {
			font-size: 15px;
		}

		.searchbox span {
			line-height: 48px;
			font-size: 17px;
			color: #666666;
		}

		.searchbox .nav3 {
			width: 50%;
			float: left;
			margin-left: -16px;
			margin-top: 15px;
		}

		.searchbox a {
			color: #666666;
		}

		.searchbox a:hover {
			color: #0F74B5;
		}

		.searchform {
			float: right;
			width: 320px;
			margin-right: 0 !important;
			padding: 0;
			margin-top: 20px;
		}

		.searchform i {
			position: absolute;
			color: rgb(139, 139, 139);
			margin-top: 10.6px;
			margin-left: 10px;
		}

		.searchform input {
			padding-left: 32px;
			width: 305px;
			font-size: 14px;
		}

		.searchHeaderBox {
			position: absolute;
			top: 83px;
			z-index: 1999;
			background-color: white;
			width: 400px;
			left: 856px;
			padding: 10px;
		}

		.searchHeaderBox .label {
			padding: 3px 8px;
			border: 1px solid #d8d8d8;
			margin-right: 12px;
			margin-bottom: 10px;
		}

		::-webkit-input-placeholder {
			/* WebKit browsers */
			color: #999;
			font-size: 14px;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #999;
			font-size: 14px;
		}

		:-ms-input-placeholder {
			/* Internet Explorer 10+ */
			color: #999;
			font-size: 14px;
		}
	</style>
</head>

<body>

	<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
	<nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="./index.html"><i class="iconfont icon-globe1 mr-2"
					style="font-size: 20px;"></i><strong>数据资产管理</strong>
			</a>
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
				aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="navbar-collapse collapse" id="navbarColor02" >
				<ul class="navbar-nav mr-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link" href="./index.html">门户首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./dataResources.html">公开数据</a>
					</li>
<!--					<li class="nav-item dropdown">-->
<!--						<a class="nav-link" href="productStore.html">数据产品 </a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./serviceStore.html">服务产品</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link active" href="./customShop.html">定制数据</a>-->
<!--					</li>-->
					<li class="nav-item">
						<a class="nav-link" href="./developer.html">平台介绍</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./newMessage.html">平台资讯</a>
					</li>
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./accessData.html">数据访问</a>-->
<!--					</li>-->
					<li class="nav-item highSerachBtn">
						<div class="col pt-4 pb-4">
							<a class="btn btn-lg btn-outline-white btn-round searchKeyword text-white"
								style="color: #353c58 !important;border-color: #353c58;"><span class="iconbox border-0"
									style="margin-right: 5px;"><i class="iconfont icon-search"
										style="font-size: 20px;"></i></span>搜索</a>
						</div>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto d-flex align-items-center">
<!--					<li class="nav-item">-->
<!--						<a class="nav-link myBtn" href="javascript:;">-->
<!--							<span class="iconbox border-0" style="margin-right: 5px;"><i-->
<!--									class="iconfont icon-cart-arrow-down"></i></span>产品袋-->
<!--						</a>-->
<!--					</li>-->
					<li class="nav-item">
						<a class="nav-link" href="./mySpace.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="iconfont icon-bxs-book-reader"></i></span>用户中心 </a>
					</li>
					<li class="nav-item disabledNone" id="userInfo">
						<ul class="layui-nav" style="background-color: rgba(244, 244, 244, 0);padding: 0;">
							<li class="layui-nav-item">
							  <a href="javascript:;" style="color: #353c58 !important;">
								  <span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-user-fill"></i></span>
								  用户：<span id="accunt">登录过期</span>
							  </a>
							  <dl class="layui-nav-child">
								<dd><a href="./changePassword.html">修改密码</a></dd>
								<dd><a href="" id="logOutBtn">退出登录</a></dd>
							  </dl>
							</li>
						  </ul>
					</li>
					<li class="nav-item disabledNone" id="attestation">
						<a class="nav-link" style="color:#FF820C;padding-left: 0px;font-size:12px;cursor: pointer;">未认证</a>
					</li>
					<li class="nav-item disabledNone noUser">
						<a class="nav-link" href="./login.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="iconfont icon-user-fill"></i></span>登录 </a>
					</li>
					<li class="nav-item disabledNone noUser">
						<span class="nav-link" href="#">
							<a class="btn btn-success btn-round shadow-sm text-white" href="./register.html">
								<i class="iconfont icon-github"></i> 立即注册 <a href="#" class="downloadzip"
									class="hidden"></a>
							</a>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->


	<!--------------------------------------HEADER--------------------------------------->
	<div class="jumbotron jumbotron-fluid mb-3 bg-primary position-relative"
		style="background-color: #FF6A00 !important;">
		<div class="container text-white h-100 tofront mt-5">
			<div class="row align-items-center justify-content-center text-center">
				<div class="col-md-10">
					<h1 class="display-3">定制数据<p style="font-size: 2rem;">定制你需要的数据</p>
					</h1>
				</div>
			</div>
		</div>
	</div>
	<!-- End Header -->


	<!--------------------------------------MAIN--------------------------------------->
	<div class="container pt-5 pb-5">
		<!-- 分类 -->
		<section class="pb-5" data-aos="fade-up">
<!--			<div class="classify">-->
<!--				<span>定制时间：</span>-->
<!--				<ul class="nav nav1 time">-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link active1" href="#">全部</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">当天</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">3日内</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">一周内</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">一月内</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">自定义</a>-->
<!--					</li>-->
<!--				</ul>-->
<!--			</div>-->
<!--			<div class="classify">-->
<!--				<span>认领状态：</span>-->
<!--				<ul class="nav nav2 status">-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link active1" href="#">全部</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">未认领</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">已认领</a>-->
<!--					</li>-->
<!--				</ul>-->
<!--			</div>-->

		</section>
		<section class="pb-5" data-aos="fade-up">
			<!-- 搜索 -->
			<div class="searchbox">
				<ul class="nav nav3">

					<li class="nav-item">
						<a class="nav-link active1" href="#">综合排序</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">按日期</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">按期限</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">按认领人</a>
					</li>
				</ul>
				<div class="form-group searchform">
					<div class="col-sm-10">
						<!-- <i class="fas fa-search"></i>
						<input type="search" id="searchInput" class="form-control" value="" placeholder="请输入关键字搜索产品"> -->
						<button type="button" class="btn btn-success text-white searchBtn">前往高级搜索</button>
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>
		</section>

		<section class="pb-5" data-aos="fade-up">
			<div class="card-deck card-pricing  DataProduct">




			</div>

			<nav aria-label="Page navigation example">
				<ul class="pagination pt-4 pb-4" style="float: right;">
					<li class="page-item previous"> <a class="page-link" href="#" aria-label="Previous">
						<span aria-hidden="true">&laquo;</span></a></li>
						<li class="page-item next"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
				</ul>
			</nav>
		</section>
	</div>
	<!-- End Main -->



	<!--------------------------------------FOOTER 底部--------------------------------------->

	<footer class="bg-black pb-5" style="padding-top: 20px;padding-bottom: 20px !important;background-color: #FF6A00;">
		<div class="container">
			<div class="row" style="text-align: center;">
				<div class="col-12 col-md mr-4">
					<small class="d-block mt-3 text-muted" style="color: white !important;">
						<p style="color: white;margin-top: 10px;font-size: 30px;">数据资产管理平台</p>
						Copyright @ 2024 数据资产管理平台-版权所有 蜀ICP备202423603号
					</small>
				</div>
			</div>
		</div>
	</footer>
	<!-- End Footer -->



	<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
	<script src="vendor/jquery.min.js" type="text/javascript"></script>
	<script src="vendor/popper.min.js" type="text/javascript"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>
	<!-- Animation -->
	<script src="vendor/aos.js" type="text/javascript"></script>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="js/header.js" type="text/javascript"></script>
	<script src="assets/font/iconfont.js" type="text/javascript"></script>
	<noscript>
		<style>
			*[data-aos] {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
		</style>
	</noscript>
	<script>
		AOS.init({
			duration: 700
		});
	</script>

	<!-- Disable animation on less than 1200px, change value if you like -->
	<script>
		AOS.init({
			disable: function () {
				var maxWidth = 1200;
				return window.innerWidth < maxWidth;
			}
		});
	</script>
	<script>
		$(function () {

			$('.nav1 .nav-item a').click(function (e) {
				e.preventDefault();
				$(".nav1 .nav-item a").removeClass('active1')
				$(this).addClass("active1")
			})
			$('.nav2 .nav-item a').click(function (e) {
				e.preventDefault();
				$(".nav2 .nav-item a").removeClass('active1')
				$(this).addClass("active1")
			})
			$('.nav3 .nav-item a').click(function (e) {
				e.preventDefault();
				$(".nav3 .nav-item a").removeClass('active1')
				$(this).addClass("active1")
			})



			//获取列表
			var pageNum = 1, pageSize = 8;
			let startTime, endTime = new Date()
			let parame = { pageNum, pageSize, status: 0 ,type:1,}
			let customData
			// 获取前n天日期
			function getAgoDay(n) {
				let date = new Date();
				let seperator = "-"
				let newDate = new Date(date.getTime() - n * 24 * 60 * 60 * 1000);
				let year = newDate.getFullYear();
				let month = newDate.getMonth();
				let day = newDate.getDate();
				let time = new Date(year,month,day)
				// return year.toString() + seperator + month.toString() + seperator + day.toString()
				return time
			}

			function getServiceInfo(parame) {
				console.log(parame)
				$.ajax({
       				timeout:30000,
					type: 'GET',
					url: window.Http + "/CustomizeRequest/list",
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					data: parame,
					success: function (res) {
						console.log(res)
						if (res.code == 200) {
							$(".DataProduct").empty()
							if (res.rows && res.rows.length > 0) {
								customData = res.rows
								let html = "";
								let state = "未认领";
								res.rows.forEach(function (val, index) {
									state = val.status == 1 ? "已认领" : "未认领"

									html += `<div class="card border-0 shadow-sm">
										<div class="card-header border-0">
											<h3 class="my-0 font-weight-normal" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">`+ (val.name || "未命名") + `</h3>
										</div>
										<div class="card-body">
											<ul class="list-unstyled" style="text-align: left;">
												<li style="margin-bottom:10px">定制状态：`+ state + `</li>
												<li style="margin-bottom:10px">申请日期：`+ (val.createTime === null ? '——' : val.createTime.slice(0,10)) + `</li>
<!--												<li style="margin-bottom:10px">截止日期：`+ (val.createTime === null ? '——' : val.createTime.slice(0,10)) + `</li>-->
												<li>申请人数：`+ (val.claimNumber || 0) + ` 人</li>
											</ul>
											<div><button type="button" class="btn btn-success btn-sm  text-white detail" data-Id="`+ val.id + `">查看详情</button></div>
										</div>
									</div>`
								})
								$(".DataProduct").append(html);
							} else {
								$(".DataProduct").html(`<h3 style="margin: auto;">没有找到相关数据</h3>`)
							}
							renderPage(res.total, parame.pageNum)
						}
					}
				});
			}
			// 点击详情跳转到详情界面
			$(".DataProduct").delegate(".detail", "click", function () {
				let dataId = $(this).attr("data-ID");
				//let Type = $(this).attr("data-TYPE");
				window.location.href = './customDetial.html?customId=' + dataId;

			});

			//处理分页
			let pageNumber;
			function renderPage(num, pagen) {
				pagen -= -1;
				pageNumber = Math.ceil(num / pageSize);
				let html = '';
				$('.pagination').empty();
				$('.pagination').append(`<li class="page-item previous"> <a class="page-link" href="#" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span></a></li>
					<li class="page-item next"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`)
				for (var i = 1; i <= pageNumber; i++) {
					html += `<li class="page-item"><a class="page-link pageN" href="#">` + i + `</a></li>`
				}
				$('.pagination li:first-child').after(html)
				$('.pagination li:nth-child(' + pagen + ')').addClass('active')
			}
			// 请求数据
			(function () {
				// 默认请求全部数据
				getServiceInfo(parame);
				// 根据定制时间请求数据
				$('.time .nav-link').click(function () {
					parame.endTime = endTime.getTime()
					parame.pageNum = 1
					parame.pageSize = 8
					let time = $(this).html()
					let zdy = $(this).parent().parent().children().eq(-1).children()
					switch (time) {
						case '全部':
							parame.endTime = null
							parame.startTime = null
							getServiceInfo(parame);
							zdy.html('自定义')
							break;
						case '当天':
							parame.startTime = getAgoDay(0).getTime()
							getServiceInfo(parame);
							zdy.html('自定义')
							break;
						case '3日内':
							parame.startTime = getAgoDay(3).getTime()
							getServiceInfo(parame);
							zdy.html('自定义')
							break;
						case '一周内':
							parame.startTime = getAgoDay(7).getTime()
							getServiceInfo(parame);
							zdy.html('自定义')
							break;
						case '一月内':
							parame.startTime = getAgoDay(30).getTime()
							getServiceInfo(parame);
							zdy.html('自定义')
							break;
						case '自定义':
							$(this).html(`<div class="layui-form" lay-filter="example" style="height:48px;">
											<div class="layui-form-item">
												<div class="layui-inline">
												<div class="layui-inline" id="test6">
													<div class="layui-input-inline">
													<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期" style="font-weight: 400;color: #0ac382;">
													</div>
													<div class="layui-form-mid">-</div>
													<div class="layui-input-inline">
													<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期" style="font-weight: 400;color: #0ac382;">
													</div>
												</div>
												</div>
											</div>
										</div>`)
							layui.use(['laydate', 'form'], function () {
								var laydate = layui.laydate;
								laydate.render({
									elem: '#test6'
									, range: ['#test-startDate-1', '#test-endDate-1']
									, type: 'datetime'
									, done: function () {
										parame.startTime = getDate($('#test-startDate-1').val()).getTime()
										parame.endTime = getDate($('#test-endDate-1').val()).getTime()
										getServiceInfo(parame);
									}
								});

							})
							break;
						default:
							break;
					}
				})
				// 转换为日期格式
				function getDate(strDate) {
					var st = strDate;
					var a = st.split(" ");
					var b = a[0].split("-");
					var c = a[1].split(":");
					var date = new Date(b[0], `${b[1]-1}`, b[2], c[0], c[1], c[2]);
					return date;
				}


				// 根据认领状态请求数据
				$('.status .nav-link').click(function () {
					parame.pageNum = 1
					parame.pageSize = 8
					let statusText = $(this).html()
					switch (statusText) {
						case '全部':
							//TODO 全部传字符串
							parame.status = 1
							getServiceInfo(parame);
							break;
						case '未认领':
							parame.status = 0
							getServiceInfo(parame);
							break;
						case '已认领':
							parame.status = 1
							getServiceInfo(parame);
							break;
						default:
							break;
					}
				})
			}());

			// 分页(数字)
			$('.pagination').on('click', '.pageN', function (e) {
				e.preventDefault()
				// 获取页数
				let num = $(this)[0].innerHTML;
				parame.pageNum = num
				getServiceInfo(parame);// 发送请求
			})
			// 分页(上一页)
			$('.pagination').on('click', '.previous', function (e) {
				e.preventDefault()
				// 获取当前页数
				let num = $(this).siblings('.active')[0].children[0].innerHTML;
				// console.log($(this).siblings('.active')[0].children[0].innerHTML);
				if (num > 1) {
					num -= 1;
					parame.pageNum = num
					getServiceInfo(parame);// 发送请求
				}
			})
			// 分页(下一页)
			$('.pagination').on('click', '.next', function (e) {
				e.preventDefault()
				// 获取当前页数
				let num = $(this).siblings('.active')[0].children[0].innerHTML;
				if (num < pageNumber) {
					num -= -1;
					parame.pageNum = num
					getServiceInfo(parame);// 发送请求
				}
			})

			$('.searchBtn').click(function () {
				window.location.href = './dataSearch.html'
			})

			// 排序
			$('.searchbox a').on('click', function () {
				if ($(this).html() == '综合排序') {
					parame.order = ''
					getServiceInfo(parame);

				} else if ($(this).html() == '按日期') {
					parame.order = 'createTime'
					getServiceInfo(parame);

				} else if ($(this).html() == '按期限') {
					parame.order = 'deadline'
					getServiceInfo(parame);

				} else if ($(this).html() == '按认领人') {
					parame.order = 'claimNumber'
					getServiceInfo(parame);

				}

			})


			$(".DataProduct").delegate(".callTelBtn", "click", function () {
				let linkMobile = $(this).attr("data-linkMobile");
				layer.alert("请拨打电话：" + linkMobile);
			});
		})
	</script>
</body>

</html>
